<template>
  <div style="background-color:#fff;">
    <fullscreen v-model="isFullscreen" style="position:absolute;right:30px;top:10px;"/>
    <div class="simulate-wrapper">
      <div class="simulate-title"></div>
      <div class="simulate-banner">
        <img src="./../../images/simulate-banner.png" style="width:100%;height:100%;">
      </div>
      <div class="simulate-title"></div>
      <div class="info-wrapper">
        <div class="info-content">
          <div class="content-left">
            <p style="margin-bottom:20px;">考生须知：</p>
            <p>1、遵守考场纪律，服从监考人员指挥。</p>
            <p>2、进入考场，手机、关机。禁止吸烟，禁止吃零食。</p>
            <p>3、未经工作人员允许，考生禁止随意出入考场。</p>
            <p>4、考场内禁止大声喧哗，禁止随意走动。</p>
            <p>5、考试中认真答题，不准交头接耳。</p>
            <p>6、考试中不准冒名顶替，不准弄虚作假。</p>
            <p>7、注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。</p>
            <p>8、爱护公物及考试设备。</p>
          </div>
          <div class="content-right">
            <p style="margin-top:50px;">理论考试01考台</p>
            <p class="red-text" style="margin-top:30px;">身份证号:42011115542102150</p>
            <p class="red-text" style="margin-top:30px;">考生姓名：张三</p>
            <div style="text-align:center;padding:30px;">
              <Select v-model="examGroup" style="width:200px">
                <Option
                  v-for="item in examGroupList"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </div>
            <div style="text-align:center;">
              <button class="confirm-btn" @click="startExam">
                <span>确定</span>
              </button>
              
            </div>
            <p class="red-text" style="margin-top:40px;">点击“确定”按钮开始考试！ <button class="confirm-btn" @click="resetSimulate">
                <span>还原所有考题</span>
              </button></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Fullscreen from "./../my-components/fullscreen";
import {
  restoreSimulate
} from "@/api/questions";
import { mapState } from "vuex";
export default {
  name: "simulate-exam",
  components: { Fullscreen },
  data() {
    return {
      examGroupList: [
        { label: "仿真试题1", value: 1 },
        { label: "仿真试题2", value: 2 },
        { label: "仿真试题3", value: 3 },
        { label: "仿真试题4", value: 4 },
        { label: "仿真试题5", value: 5 },
        { label: "仿真试题6", value: 6 },
        { label: "仿真试题7", value: 7 },
        { label: "仿真试题8", value: 8 },
        { label: "仿真试题9", value: 9 },
        { label: "仿真试题10", value: 10 }
      ],
      examGroup: 1,
      choosedSubject: 1,
      isFullscreen: false
    };
  },
  computed: {
    //所选的科目
    ...mapState({
      choosedSubject: state => state.app.choosedSubject
    })
  },
  mounted() {

  },
  methods: {
    startExam() {
      this.$router.push({
        path: "/simulate-exercise-start",
        query: { examGroup: this.examGroup }
      });
    },
    async resetSimulate(){
       const res = await restoreSimulate();
       if(res.code==0){
         this.$Message.success('还原成功')
       }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "./../../assets/styles/common";
.red-text {
  color: #e4393c;
}
.confirm-btn {
  padding: 2px 3px;
  border: 1px solid #102b5a;
  letter-spacing: 5px;
  background: -webkit-linear-gradient(#f6ffff, #b8c5f1); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(#f6ffff, #b8c5f1); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#f6ffff, #b8c5f1); /* Firefox 3.6 - 15 */
  background: linear-gradient(#f6ffff, #b8c5f1); /* 标准的语法 */
  color: #000;
  cursor: pointer;
  span {
    border: 1px dotted #493602;
    padding: 3px 15px;
  }
}
.simulate-wrapper {
  width: 1020px;
  height: 660px;
  margin: 80px auto;
  border: 1px solid #9e9e9e;
  background-color: #fff;
  .simulate-title {
    width: 100%;
    height: 22px;
    background: -webkit-linear-gradient(
      #dadada,
      #fffef9
    ); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#dadada, #fffef9); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#dadada, #fffef9); /* Firefox 3.6 - 15 */
    background: linear-gradient(#dadada, #fffef9); /* 标准的语法 */
  }
  .simulate-banner {
    height: 88px;
  }
  .info-wrapper {
    border-top: 2px solid #cbcbcb;
    .info-content {
      width: 980px;
      height: 450px;
      margin: 35px auto;
      border: 2px solid #cbcbcb;
      border-radius: 5px;
      background-color: #efefef;
      font-family: "SimSun";
      font-size: 18px;
      font-weight: 600;
      .content-left {
        width: 50%;
        height: 100%;
        padding: 24px;
        float: left;
        text-align: left;
        border-right: 2px solid#c5c5c5;
        p {
          line-height: 38px;
        }
      }
      .content-right {
        width: 50%;
        height: 100%;
        padding: 24px;
        float: left;
        text-align: left;
      }
    }
  }
}
</style>
